import React, { Component } from 'react';
import Swiper from 'react-native-swiper';
import { AppRegistry, Text, TextInput, View ,FlatList,TouchableOpacity,Image,Dimensions,ScrollView,TouchableHighlight} from 'react-native';
var {height, width} = Dimensions.get('window');
import ScrollableTabView,{DefaultTabBar,ScrollableTabBar}  from 'react-native-scrollable-tab-view';
export default class Cangpinguan extends Component {
  constructor(props) {
    super(props);
    navigation = props.navigation; 
    this.state = {
        dataSource:[
            {'id':1,'name':"磁山文化红陶盂",'shidai':"元代",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},  {'id':4,'name':"磁山文化红陶盂",'shidai':"元代",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
        ],
        tabs:1,

    };
  }
    static navigationOptions=({navigation}) => ({
        headerTitle: '学术详情',
        headerTitleStyle:{
            alignSelf:'center',
            // width:width
        },
        headerTintColor:'burlywood',
        
      });
      _keyExtractor = (item, index) => item.id;
      _renderItem({item,index}){
        const { navigate } = this.props.navigation;
          return(
            <TouchableOpacity onPress={() => navigate('ProfileD')} activeOpacity={0.3}>
            <View style={{width:width*0.9,height:60,paddingTop:10,flex: 1, flexDirection: 'column',justifyContent: 'flex-start',alignSelf:'center',marginBottom:10}}>
                <View style={{flexDirection:'column',justifyContent:'flex-start',paddingLeft:10}}>
                <Text style={{fontWeight:'',}}> {item.name}</Text>
                <Text style={{fontWeight:'',}}> 时代：{item.shidai}</Text>
                </View>
                <View style={{width:width*0.9,height:1,backgroundColor:'#CCCCCC',marginTop:20}}>
                </View>
            </View>
            </TouchableOpacity>
          )
      };
render() {
  const { navigate } = this.props.navigation;
        return (
          <View style={{flexDirection: 'column',flex:1,backgroundColor:'white'}}>
        <ScrollableTabView
        style={{flex:2,}}
        tabBarPosition='top'//tabBarPosition默认top  位于屏幕顶部   bottom位于屏幕底部  overlayTop悬浮在顶部
        initialPage={0} //初始化时被选中的Tab下标，默认是0
        locked={true}//表示手指是否能拖动视图  默认false  true则不能拖动,只可点击
        renderTabBar={() => <DefaultTabBar />}
        tabBarUnderlineStyle={{backgroundColor: 'black',width:width*0.2,marginLeft:width*0.15}}//设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色
        tabBarBackgroundColor='#FFFFFF'//设置整个Tab这一栏的背景颜色
        tabBarActiveTextColor='black'//设置选中Tab的文字颜色
        tabBarInactiveTextColor='#CCCCCC'//设置未选中Tab的文字颜色
        tabBarTextStyle={{fontSize: 16,fontWeight:'',}}//设置Tab文字的样式
        onChangeTab={(obj) => {//Tab切换之后会触发此方法
          console.log('index:' + obj.i);
        }}
        onScroll={(postion) => {  //视图正在滑动的时候触发此方法a18292366183
          // float类型 [0, tab数量-1]
          console.log('scroll position:' + postion);
        }}
    >
        <View tabLabel='登录' style={{backgroundColor:'white',alignItems:'center',flexDirection: 'column'}}>
        <ScrollView>
            <Image source={require("../img/logo.png")} style={{width:width*0.4,height:width*0.4,alignSelf:'center'}}></Image>
            <View style={{ width:width*0.9,height:200,flexDirection: 'column',justifyContent: 'space-between',marginTop:20}}>
                <View style={{height:60}}>
                </View>
                <View  style={{borderColor:'black',borderWidth:1,flexDirection: 'row',justifyContent:'flex-start',width:width*0.9}}>
                <Image source={require("../img/logo.png")} style={{width:50,height:50}} ></Image>
                <TextInput style={{marginLeft:20,width:width*0.6}} placeholder={'请输入手机号码'} underlineColorAndroid={'transparent'}></TextInput>
                </View>
                <View  style={{borderColor:'black',borderWidth:1,flexDirection: 'row',justifyContent:'flex-start',marginTop:20,}}>
                <Image source={require("../img/logo.png")} style={{width:50,height:50}}></Image>
                <TextInput placeholder={'请输入登录密码'} style={{marginLeft:20,width:width*0.6}} underlineColorAndroid={'transparent'}></TextInput>
                </View>
            </View>
            </ScrollView>
        </View>
        <View tabLabel='注册' style={{backgroundColor:'white',alignItems:'center',flexDirection: 'column'}}>
        <ScrollView style={{}} showsVerticalScrollIndicator={false} >
        <Image source={require("../img/logo.png")} style={{width:width*0.4,height:width*0.4,alignSelf:'center'}}></Image>
        <View style={{ width:width*0.9,flexDirection: 'column',marginTop:20}}>
            <View  style={{borderColor:'black',borderWidth:1,flexDirection: 'row',justifyContent:'flex-start',width:width*0.9}}>
            <Image source={require("../img/logo.png")} style={{width:50,height:50}} ></Image>
            <TextInput style={{marginLeft:20,width:width*0.6}} placeholder={'请输入昵称（最长8位）'} underlineColorAndroid={'transparent'}></TextInput>
            </View>
            <View  style={{borderColor:'black',borderWidth:1,flexDirection: 'row',justifyContent:'flex-start',marginTop:20,}}>
            <Image source={require("../img/logo.png")} style={{width:50,height:50}}></Image>
            <TextInput placeholder={'请输入手机号码'} style={{marginLeft:20,width:width*0.6}} underlineColorAndroid={'transparent'}></TextInput>           
            </View>
            <View  style={{borderColor:'black',borderWidth:1,flexDirection: 'row',justifyContent:'flex-start',marginTop:20,}}>
            <Image source={require("../img/logo.png")} style={{width:50,height:50}}></Image>
            <TextInput placeholder={'请输入手机验证码'} style={{marginLeft:20,width:width*0.4}} underlineColorAndroid={'transparent'}></TextInput>
            <TouchableOpacity onPress={()=>alert("获取验证码")} style={{width:width*0.3,backgroundColor:'black',flexDirection:'column',justifyContent:'center'}}>
            <View >
            <Text style={{color:'white',alignSelf:'center'}}>获取验证码</Text>
            </View>
            </TouchableOpacity>
            </View>
            <View  style={{borderColor:'black',borderWidth:1,flexDirection: 'row',justifyContent:'flex-start',marginTop:20,}}>
            <Image source={require("../img/logo.png")} style={{width:50,height:50}}></Image>
            <TextInput placeholder={'请输入登录密码'} style={{marginLeft:20,width:width*0.6}} underlineColorAndroid={'transparent'}></TextInput>
            </View>
            <View  style={{borderColor:'black',borderWidth:1,flexDirection: 'row',justifyContent:'flex-start',marginTop:20,}}>
            <Image source={require("../img/logo.png")} style={{width:50,height:50}}></Image>
            <TextInput placeholder={'请确认登录密码'} style={{marginLeft:20,width:width*0.6}} underlineColorAndroid={'transparent'}></TextInput>
            </View>
            <TouchableOpacity onPress={()=>alert("忘记密码")}>
            <View  style={{flexDirection: 'column',marginTop:20,backgroundColor:'black',height:50,lineHeight:1,justifyContent:'center'}}>
            <Text style={{fontWeight:'',color:'white',alignSelf:'center'}}>注册</Text>
            </View>
            </TouchableOpacity>
            <View  style={{flexDirection: 'row',justifyContent:'center',marginTop:20}}>
            <Text style={{fontWeight:'',color:'black',}}>点击注册，即表示您接受 用户协议</Text>
            </View>
        </View>
        </ScrollView>
    </View>
       
    </ScrollableTabView>
      </View>

         )
  
       
     }
}